◀︎STUDY JavaScript_034-1  CSS で五角形を描く

◀︎
 1 
 ----- 
 2 
 ----- 
 3 
 ----- 
 4 
 ----- 
 5 
▶︎

% で大きさを計算する

▼ Download: ■ sample_JS_034-000_ABCDE

CSS で五角形を描く

サンプル - 1
width:240px; height:80px のボックスの中に, 3つの画像ファイル (img src="sample_JS_034-A.png) を(ちょうど良いポジションに)入れてある.
サンプル - 2
五角形を画像ではなく svg で記述した.
サンプル - 3
さらに, svg ではなく CSS → clip-path:polygon(0 0,50px 0,60px 20px,50px 40px,0 40px) で記述した.
サンプル - 4
width:calc(720px / 3) → 720 ÷ 3 =240 だが, これを自由変形できるように width:calc(100% / 3)% と変更した.

SVG 解説


CSS 解説




◀︎
 1 
 ----- 
 2 
 ----- 
 3 
 ----- 
 4 
 ----- 
 5 
▶︎

◀︎Contents     STUDY JavaScript_034-1